<template>
	<view class="">
		<view class="bg-w pd15">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="180rpx">
				<u-form-item label="商品名称" prop="com_name" ref="item1" :required="true">
					<u--input v-model="model1.com_name" border="surround" placeholder="请输入商品名称"></u--input>
				</u-form-item>
				<u-form-item label="商品编号" prop="com_code" ref="item1" :required="true">
					<u--input v-model="model1.com_code" border="surround" placeholder="请输入商品编号" disabled></u--input>
				</u-form-item>
				<u-form-item label="规格型号" prop="com_type" ref="item1">
					<u--input v-model="model1.com_type" border="surround" clearable placeholder="请输入规格型号"></u--input>
				</u-form-item>
				<u-form-item label="商品分类" prop="com_category" ref="item1" :required="true" @click="showCommercial=true">
					<u--input v-model="model1.com_category" border="surround" suffixIcon="arrow-down"
						placeholder="请选择商品分类" suffixIconStyle="color: #909399" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="商品品牌" prop="brandText" ref="item1" @click="getDictItemList('1788462225304879105')">
					<u--input v-model="model1.brandText" border="surround" suffixIcon="arrow-down" placeholder="请选择商品品牌"
						suffixIconStyle="color: #909399" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="商品单位" prop="unitText" ref="item1" :required="true"
					@click="getDictItemList('1788460801191870466')">
					<u--input v-model="model1.unitText" border="surround" suffixIcon="arrow-down" placeholder="请选择商品单位"
						suffixIconStyle="color: #909399" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="购货价格" prop="purchase_price" ref="item1" :required="true">
					<u--input v-model="model1.purchase_price" border="surround" placeholder="请输入购货价格"></u--input>
				</u-form-item>
				<u-form-item label="销货价格" prop="sales_price" ref="item1" :required="true">
					<u--input v-model="model1.sales_price" border="surround" placeholder="请输入销货价格"></u--input>
				</u-form-item>
				<u-form-item label="条形码" prop="bar_code" ref="item1">
					<u--input v-model="model1.bar_code" border="surround" placeholder="请输入条形码"></u--input>
				</u-form-item>
				<u-form-item label="默认仓库" prop="warehouseText" ref="item1" @click="showbaseWarehouse=true">
					<u--input v-model="model1.warehouseText" border="surround" suffixIcon="arrow-down"
						placeholder="请选择默认仓库" suffixIconStyle="color: #909399" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="商品货位" prop="storage_location" ref="item1">
					<u--input v-model="model1.storage_location" border="surround" placeholder="请输入商品货位"></u--input>
				</u-form-item>
				<u-form-item label="库存阈值	" prop="inventory" ref="item1">
					<u--input v-model="model1.inventory" border="surround" placeholder="请输入库存阈值"></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remark" ref="item1">
					<u--textarea v-model="model1.remark" border="surround" placeholder="请输入备注"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<u-button type="primary" text="编辑" @click="baseCommodityEditClick" v-if="model1.id"></u-button>
			<u-button type="primary" text="保存" @click="baseCommodityClick" v-else></u-button>
		</view>
		<u-popup :show="showCommercial" @close="close" @open="open">
			<view class="popBox">
				<view class="text-center ft17 ftw700 plt15">请选择商品分类</view>
				<view class="tagoul pd15 alcenter">
					<view class="flex alcenter">
						<!-- <view class="cl-h1" @click="getRootList()" v-if="commodityListtwo!=''">全部</view> -->
						<view class="" @click="getRootList()">全部</view>
						<view class="cl-h1 ml15" v-if="commodityListtwo!=''">{{'已选择：'+commodityListtwo.name}}</view>
						<!-- <view class="mr10" v-if="commodityListtwo!=''">
							<u-icon name="arrow-right" color="#6fbcff" size="16"></u-icon>
						</view> -->
					</view>
					<!-- <view class="flex alcenter" v-for="(itn,ind) in commodityListtwo" :key="ind">
						<view @click="tagtwoclick(itn)">{{itn.name}}</view>
					</view> -->
				</view>
				<view class="tagclass plr15">
					<ul class="plt10 flex alcenter spaceb border-bottom" v-for='(item,index) in commodityList'
						:key="index" @click='tagClick(item,index)'>
						<li>{{item.name}}</li>
						<u-icon name="arrow-right" color="#666" size="16" v-if="item.hasChild!=null"></u-icon>
					</ul>
				</view>
				<view class="btns">
					<u-button type="primary" text="保存" @click="commodityConfirm"></u-button>
				</view>
			</view>

		</u-popup>
		<!-- <u-picker :show="showCommercial" :columns="commercial" @confirm="confirmCommercial" @cancel="close"></u-picker> -->
		<!-- 商品品牌 -->
		<u-picker :show="showdictItem" :columns="dictItemList" @confirm="confirmdictItem" @cancel="close"
			keyName="itemText"></u-picker>
		<!-- 仓库管理 -->
		<u-picker :show="showbaseWarehouse" :columns="baseWarehouseList" @confirm="confirmBaseWarehouse"
			keyName="warName" @cancel="close"></u-picker>

	</view>
</template>

<script>
	import {
		id
	} from 'element-plus/es/locale';
	export default {
		data() {
			return {
				commodityList: [],
				commodityListtwo: {},
				model1: {
					id: '',
					bar_code: "",
					brand: "",
					brandText: '',
					com_category: "",
					comCategory: '',
					com_code: "",
					com_name: "",
					com_type: "",
					description: "",
					inventory: '',
					purchase_price: '',
					remark: "",
					sales_price: '',
					storage_location: "",
					unit: "",
					unitText: '',
					warehouse: "",
					warehouseText: '',
					cover_img: '',
					sysOrgCode: ''
				},
				rules: {
					'com_name': {
						type: 'string',
						required: true,
						message: '请输入商品名称',
						trigger: ['blur', 'change']
					},
					'com_code': {
						type: 'string',
						required: true,
						message: '请输入商品编号',
						trigger: ['blur', 'change']
					},
					'com_category': {
						type: 'string',
						required: true,
						message: '请选择商品分类',
						trigger: ['change']
					},
					'unitText': {
						type: 'string',
						required: true,
						message: '请选择商品单位',
						trigger: ['change']
					},
					'purchase_price': {
						type: 'number',
						required: true,
						message: '请输入购货价格',
						trigger: ['change']
					},
					'sales_price': {
						type: 'number',
						required: true,
						message: '请输入销货价格',
						trigger: ['change']
					}
				},
				showCommercial: false,
				commercial: [
					['商户1', '商户12']
				],
				showCreator: false,
				creator: [
					['商户1', '商户12']
				],
				showReview: false,
				reviewStatus: [
					['商户1', '商户12']
				],
				showDate: false,
				mode: 'single',
				minDate: '1970-01-01',
				maxDate: '2100-01-01',
				pageNo: 1,
				pageSize: 100,
				showdictItem: false,
				dictItemList: [
					[]
				],
				dictId: '',
				baseWarehouseList: [
					[]
				],
				showbaseWarehouse: false
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getRootList()
			this.getBaseWarehouseList()
			if (!this.$u.test.isEmpty(options.item)) {
				const item = JSON.parse(decodeURIComponent(options.item));
				console.log(item)
				this.model1 = {
					id: item.id,
					bar_code: item.barCode,
					brand: item.brand,
					brandText: item.brand_dictText,
					com_category: '',
					comCategory: item.comCategory,
					com_code: item.comCode,
					com_name: item.comName,
					com_type: item.comType,
					description: item.description,
					inventory: item.inventory,
					purchase_price: item.purchasePrice,
					remark: item.remark,
					sales_price: item.salesPrice,
					storage_location: item.storageLocation,
					sysOrgCode: item.sysOrgCode,
					unit: item.unit,
					unitText: item.unit_dictText,
					warehouse: item.warehouse,
					warehouseText: item.warehouse_dictText,
					cover_img: item.coverImg
				}
			} else {
				this.fin_sp_bill_no()
			}

		},
		onShow() {
			// this.isLogin = checkLogin()
			// if (!this.isLogin) {
			// 	this.isloginBind()
			// 	return false
			// }


		},
		methods: {
			// picker-view 列改变时触发
			pickerChange: function(e) {
				const {
					value
				} = e.detail;
				const {
					columns
				} = this.data;

				// 根据选择的列数动态设置下级选项
				this.setNextLevelOptions(value.length);

				// 更新列数和选择值
				this.setData({
					columns: columns.slice(0, value.length).concat(['请选择']),
					pickerValue: value.concat([0]) // 选择值后面追加一个0，显示默认选项
				});
			},

			// 设置下一级选项
			setNextLevelOptions: function(level) {
				const {
					options,
					pickerValue
				} = this.data;
				let currentOptions = options;

				// 根据选择的每一级选项，动态设置下一级选项
				for (let i = 0; i < level; i++) {
					currentOptions = currentOptions[pickerValue[i]].children;
				}

				// 如果下一级选项不为空，则更新到 data 中
				if (currentOptions.length > 0) {
					this.setData({
						options: currentOptions
					});
				}
			},
			tagtwoclick(item) {
				// this.commodityListtwo.length--
				// this.commodityListtwo.push(item)
				this.$apis.getChildList({
					pid: item.id,
					_t: 1721211555986
				}).then(res => {
					// console.log(res.result,'---');
					this.commodityList = res.result
					// console.log(this.commodityList,'res')
				})
			},
			tagClick(item, index) {
				console.log(item, 'item', index);
				this.commodityListtwo = item
				if (item.hasChild == null) return
				// this.commodityListtwo.push(item)
				this.$apis.getChildList({
					pid: item.id,
					_t: 1721211555986
				}).then(res => {
					// console.log(res.result,'---');
					this.commodityList = res.result
					// console.log(this.commodityList,'res')
				})
			},
			//商品分类
			getRootList() {
				this.commodityListtwo = []
				this.$apis.getRootList({
					column: 'createTime',
					order: 'desc',
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					_t: 1721211555986
				}).then(res => {
					this.commodityList = res.result.records
					console.log(this.commodityList, 'res')
				})
			},
			//getDictItemList商品品牌
			getDictItemList(dictId) {
				this.dictId = dictId
				console.log(this.dictId)
				this.$apis.getDictItemList({
					dictId: this.dictId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					_t: 1721211555986
				}).then(res => {
					this.showdictItem = true
					this.dictItemList[0] = res.result.records
				})
			},
			//getBaseWarehouseList仓库管理
			getBaseWarehouseList() {
				this.$apis.getBaseWarehouseList({
					column: 'createTime',
					order: 'desc',
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					_t: 1721211555986
				}).then(res => {
					this.baseWarehouseList[0] = res.result.records
				})
			},
			//fin_sp_bill_no商品编号
			fin_sp_bill_no() {
				this.$apis.fin_sp_bill_no().then(res => {
					this.model1.com_code = res.result
				})
			},
			commodityConfirm() {
				this.model1.com_category = this.commodityListtwo.name
				this.model1.comCategory = this.commodityListtwo.id
				this.close()
			},
			select(e) {
				this.intindex = e
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showCommercial = false
				this.showDate = false
				this.showdictItem = false
				this.showbaseWarehouse = false
				// console.log('close');
			},
			confirmCommercial(e) {
				console.log(e.value[0])
				this.model1.commercial_owner = e.value[0]
				this.showCommercial = false
			},

			confirmdictItem(e) {
				console.log(e.value[0].itemText)
				if (this.dictId == '1788462225304879105') {
					this.model1.brandText = e.value[0].itemText
					this.model1.brand = e.value[0].itemValue
				}
				if (this.dictId == '1788460801191870466') {
					this.model1.unitText = e.value[0].itemText
					this.model1.unit = e.value[0].itemValue
				}
				this.close()
			},
			confirmBaseWarehouse(e) {
				this.model1.warehouse = e.value[0].warCode
				this.model1.warehouseText = e.value[0].warName
				this.close()
			},
			baseCommodityClick() {
				let form = {
					barCode: this.model1.bar_code,
					brand: this.model1.brand,
					comCategory: this.model1.comCategory,
					comCode: this.model1.com_code,
					comName: this.model1.com_name,
					comType: this.model1.com_type,
					inventory: this.model1.inventory,
					purchasePrice: this.model1.purchase_price,
					remark: this.model1.remark,
					salesPrice: this.model1.sales_price,
					storageLocation: this.model1.storage_location,
					unit: this.model1.unit,
					warehouse: this.model1.warehouse,
				}
				console.log(form)
				this.$refs.uForm.validate().then(res => {
					this.$apis.baseCommodityAdd(form).then(res => {
						if (res.code == 200) {
							this.$u.toast(res.result)
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					})
				}).catch(errors => {})
			},
			baseCommodityEditClick() {
				let form = {
					barCode: this.model1.bar_code,
					brand: this.model1.brand,
					comCategory: this.model1.comCategory,
					comCode: this.model1.com_code,
					comName: this.model1.com_name,
					comType: this.model1.com_type,
					coverImg: this.model1.cover_img,
					description: this.model1.description,
					id: this.model1.id,
					inventory: this.model1.inventory,
					purchasePrice: this.model1.purchase_price,
					remark: this.model1.remark,
					salesPrice: this.model1.sales_price,
					storageLocation: this.model1.storage_location,
					unit: this.model1.unit,
					warehouse: this.model1.warehouse,
				}
				console.log(form)
				this.$refs.uForm.validate().then(res => {
					this.$apis.baseCommodityEdit(form).then(res => {
						if (res.code == 200) {
							this.$u.toast(res.result)
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					})
				}).catch(errors => {})
			}
		},


	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.tagoul {
		display: flex;
		background-color: #f5f5f5;
	}

	.tagclass {
		height: 400px;
		overflow: scroll;
		list-style: none;
	}

	.icon {
		border: 1px solid #E0E0E0;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.add {
		background-color: #3247D3;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.cl-status {
		color: #6A6A6A;
	}

	.pore {
		position: relative;
	}

	.popBox {
		position: relative;

		.btns {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;

			.confirm {
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				background-color: #3247D3;
				color: #fff;
			}
		}
	}

	.border-top {
		border-top: 1px solid #F8F8F8;
	}

	.number {
		background-color: #3247D3;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 10rpx;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
	}

	.cl-h1 {
		color: #6fbcff
	}
</style>